<template>
	<!-- 搜索区域 -->
	<view class="search-sticky"><my-search @click="handleSearchClick"></my-search></view>
	<!-- 搜索区域 -->
	<!-- 轮播图区域 -->
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
		<swiper-item v-for="item in bannerList" :key="item">
			<navigator class="swiper-item" :url="`/subPak/order_detail/order_detail?goodsId=${item.goods_id}`"><image :src="item.image_src" mode="aspectFit" /></navigator>
		</swiper-item>
	</swiper>
	<!-- 轮播图区域 -->
	<!-- 分类导航区域 -->
	<view class="nav_list">
		<view class="nav_list__item" v-for="item in navList" :key="item.image_src" @click="handleNavClick(item.name)"><image :src="item.image_src"></image></view>
	</view>
	<!-- 分类导航区域 -->
	<!-- 楼层区域 -->
	<view class="footer_list">
		<view class="footer_list__item" v-for="item in footerList" :key="item">
			<!-- 楼层标题 -->
			<image :src="item.floor_title.image_src" mode="aspectFit" class="footer_list__item--image"></image>
			<!-- 大图区域 -->
			<view class="footer_img_box">
				<navigator class="footer_img_box__left" :url="item.product_list[0].navigator_url">
					<image :src="item.product_list[0].image_src" mode="widthFix" :style="{ width: item.product_list[0].image_width + 'rpx' }"></image>
				</navigator>
				<view class="footer_img_box__right">
					<template v-for="(productItem, idx) in item.product_list" :key="productItem.image_src">
						<navigator class="footer_img_box__right--img" v-if="idx !== 0" :url="productItem.navigator_url">
							<image :src="productItem.image_src" mode="widthFix" :style="{ width: productItem.image_width + 'rpx' }"></image>
						</navigator>
					</template>
				</view>
			</view>
		</view>
	</view>
	<!-- 楼层区域 -->
</template>

<script lang="ts" setup>
import { reactive, toRefs } from 'vue';

interface BannerItem {
	goods_id: string;
	image_src: string;
	navigator_url: string;
	open_type: string;
}
interface NavItem {
	name: string;
	image_src: string;
	open_type: string;
	navigator_url: string;
}
interface FooterItem {
	floor_title: {
		name: string;
		image_src: string;
	};
	product_list: {
		name: string;
		image_src: string;
		image_width: string;
		open_type: string;
		navigator_url: string;
	}[];
}
const homePageData = reactive<{ bannerList: BannerItem[]; navList: NavItem[]; footerList: FooterItem[] }>({
	bannerList: [],
	// 分类导航数组
	navList: [],
	footerList: []
});
const { bannerList, navList, footerList } = toRefs(homePageData);
initBanner();
initNav();
initFooterList();
async function initBanner() {
	const {
		data: { message, meta }
	} = await uni.$http.get('api/public/v1/home/swiperdata');
	if (meta.status !== 200) {
		uni.$showMsg();
		return;
	}
	bannerList.value = message;
}
// 获取分类导航接口
async function initNav() {
	const {
		data: {
			message,
			meta: { status }
		}
	} = await uni.$http.get('api/public/v1/home/catitems');
	if (status !== 200) {
		uni.$showMsg();
		return;
	}
	navList.value = message;
}

async function initFooterList() {
	const {
		data: {
			message,
			meta: { status }
		}
	} = await uni.$http.get('api/public/v1/home/floordata');
	if (status !== 200) {
		uni.$showMsg();
		return;
	}
	for (let i = 0; i < message.length; i++) {
		const item = message[i] as FooterItem;
		for (let j = 0; j < item.product_list.length; j++) {
			item.product_list[j].navigator_url = '/subPak/goods_list/goods_list?' + item.product_list[j].navigator_url.split('?')[1];
		}
	}
	footerList.value = message;
}
const handleSwiperClick = () => {
	uni.navigateTo({
		url: '/subPak/goods_detail/goods_detail'
	});
};
const handleNavClick = (name: string) => {
	switch (name) {
		case '分类':
			uni.switchTab({
				url: '/pages/category/category'
			});
		default:
			break;
	}
};
// 搜索
const handleSearchClick = () => {
	uni.navigateTo({
		url: '/subPak/search/search'
	});
};
</script>

<style lang="scss">
swiper {
	height: 330rpx;
	.swiper-item,
	image {
		width: 100%;
		height: 100%;
	}
}
.nav_list {
	display: flex;
	justify-content: space-around;
	margin: 15rpx 0;
	.nav_list__item {
		image {
			width: 128rpx;
			height: 140rpx;
		}
	}
}
.footer_list__item--image {
	width: 100%;
	height: 60rpx;
}
.footer_img_box {
	display: flex;
	padding-left: 10rpx;
	justify-content: space-around;
	.footer_img_box__right {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
}
.search-sticky {
	position: sticky;
	top: 0;
	z-index: 999;
}
</style>
